<template>
  <div>
    组件<br>
    单选框<br>
    <el-radio-group v-model="sex">
      <el-radio label="1" >男</el-radio>
      <el-radio label="2">女</el-radio>
    </el-radio-group>
    {{sex}}

    <hr>
    复选框：<br>
    <el-checkbox v-model="likeArray" label="sport" size="large" >体育</el-checkbox>
    <el-checkbox v-model="likeArray" label="draw" size="large" >美术</el-checkbox>
    <el-checkbox v-model="likeArray" label="music" size="large" >音乐</el-checkbox>
    <el-checkbox v-model="likeArray" label="net" size="large" >上网</el-checkbox>
    {{likeArray}}<br>

    下拉框：<br>
    <el-select v-model="edu"  placeholder="请选择学历" size="large">
      <el-option label="高中" value="1"></el-option>
      <el-option label="大专" value="2"></el-option>
      <el-option label="本科" value="3"></el-option>
    </el-select>
    {{edu}}
    <hr/>
    日历框
    <el-date-picker
        v-model="birthday"
        type="date"
        placeholder="请选择生日"
        value-format="YYYY-MM-DD"
    />
  {{birthday}}

    <hr/>
    <el-table :data="cutBean.records" style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="150" />
      <el-table-column prop="name" label="姓名"  />
      <el-table-column prop="job" label="职位" />
      <el-table-column prop="birthday" label="生日"/>
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button  type="danger" @click="del(scope.row)">删除</el-button>
          <el-button  type="success" @click="update(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:currentPage="cutBean.current"
        v-model:page-size="cutBean.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutBean.total"
        @current-change="findByItem"
    />
<hr/>
    弹出框：
    <input type="button" value="显示弹出层" @click="dialogVisible = true">

    <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%">
      <span>This is a message</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm</el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      sex:"1",
      likeArray:[],
      edu:"",
      birthday:"",
      cutBean:{
        records:[
          {id:2,name:"张三",job:"经理",birthday:"1992-03-04"},
          {id:4,name:"刘国",job:"业务员",birthday:"1999-09-30"},
          {id:3,name:"朱虎",job:"主任",birthday:"1994-11-24"},
          {id:8,name:"方胜利",job:"文员",birthday:"1995-08-25"}
        ],
        total:20,
        pages:5,
        size:4,
        current:1
      },
      dialogVisible:false
    }
  },
  methods:{
    del(obj){
      alert("删除:"+obj.id);
    },
    update(obj){
      alert("修改："+obj.name);
    },
    findByItem(pageNO){
      alert("页码"+pageNO);
    }
  }
}
</script>

<style scoped>

</style>